import React, { Component } from 'react'
import { Button, Card, Tabs } from 'antd'
import { connect } from 'react-redux'
import MyStudentTaskStatusListBox from './my-student-task-status-list-box'
import MyStudentBox from './my-student/my-student-box'
import '../../../less/index.less'
import UrlPattern from 'url-pattern'
import { Link, withRouter } from 'react-router-dom'
import { getProgramIntroduction } from '../../../actions/program'
import * as myStudentsActions from '../../../actions/myStudents'
import { getMyStudents } from '../../../actions/myStudents'
import { getAssignmentQuizTagsByProgramId } from '../../../actions/assignment-quiz-tag'
import TagPage from './tag-pane/tag-box'
import { FormattedMessage } from 'react-intl'
import TutorProgramIntroductionMenuBox from './tutor-program-introduction-menu-box'
import { getStudentTagsByProgramId } from '../../../actions/student-tag'
import MyStudentQuizNoteListBox from './my-student-quiz-note-list-box'

const TabPane = Tabs.TabPane

class TutorProgramPageBody extends Component {
  constructor (props) {
    super(props)
    this.state = {
      programId: 0,
      activeKey: '2'
    }
  }

  showProgramAssignmentStatus = () => {
    const OOCL_ORGANIZATION = [4, 5, 7, 8]
    // return true
    return OOCL_ORGANIZATION.includes(this.props.user.currentOrganizationId)
  }

  componentDidMount () {
    const pattern = new UrlPattern(`/program/:programId`)
    const url = pattern.match(this.props.location.pathname)

    this.setState({
      programId: url.programId
    }, () => {
      this.props.getStudentTagsByProgramId(url.programId)
      this.props.getProgram(url.programId)
      this.props.getMyStudentsSectionsStatus(url.programId)
      this.props.getAllAssignmentQuizTagsByProgramId(url.programId)
      this.props.getMyStudents(url.programId)
    })
  }

  render () {
    const assignments = this.props.myStudentsAssignments
    const {program, myStudents} = this.props
    const {activeKey} = this.state
    return (
      <div>
        <Tabs activeKey={activeKey} type='card'
              tabBarExtraContent={this.showProgramAssignmentStatus
                ? <Link to={`/programs/${program.id}/reports`}>
                  <Button><FormattedMessage id='报表统计'/></Button>
                </Link>
                : ''}
              onChange={activeKey => this.setState({activeKey})}>
          <TabPane tab={<FormattedMessage id='题目追踪与评估'/>} key='2'>
            <Card title={program.title} noHovering>
              <div className='margin-t-3'>
                <MyStudentTaskStatusListBox
                  myStudentsAssignments={assignments}
                  programId={this.state.programId}
                />
              </div>
            </Card>
          </TabPane>
          <TabPane tab={<FormattedMessage id='学员'/>} key='3'>
            <Card title={program.title} noHovering>
              <div>
                {this.state.programId > 0 ? <MyStudentBox
                  myStudents={myStudents}
                  programId={this.state.programId}/> : ''}
              </div>
            </Card>
          </TabPane>
          <TabPane tab={<FormattedMessage id='Tag 管理'/>} key='4'>
            <TagPage
              programId={this.state.programId}/>
          </TabPane>
          <TabPane tab={<FormattedMessage id='训练营介绍'/>} key='5'>
            <TutorProgramIntroductionMenuBox programId={this.state.programId}/>
          </TabPane>
          <TabPane tab={<FormattedMessage id='学员题目备忘录'/>} key='6'>
            <MyStudentQuizNoteListBox programId={program.id}/>
          </TabPane>
        </Tabs>
      </div>)
  }
}

const mapStateToProps = ({
                           assignmentsQuizzesStatus, assignmentsBasicQuizzesOverview,
                           program,
                           programStudentAssignments,
                           studentsAssignmentStatus,
                           user,
                           myStudents,
                           assignmentsBasicQuizzesStatus,
                           userTags,
                           assignmentsSurveyQuizzesOverview,
                           programStudentAssignmentsTag,
                           programOverview,
                           assignmentQuizTags
                         }) => ({
  user,
  assignmentQuizTags,
  programStudentAssignmentsTag,
  userTags,
  myStudents,
  program,
  myStudentsAssignments: studentsAssignmentStatus.studentsAssignmentInfo
})
const mapDispatchToProps = dispatch => ({
  getProgram: (programId) => dispatch(getProgramIntroduction(programId)),
  getMyStudents: (programId) => dispatch(getMyStudents(programId)),
  getMyStudentsSectionsStatus: (programId) => dispatch(myStudentsActions.getMyStudentsSectionsStatus(programId)),
  getAllAssignmentQuizTagsByProgramId: (programId) => dispatch(getAssignmentQuizTagsByProgramId(programId)),
  getStudentTagsByProgramId: programId => dispatch(getStudentTagsByProgramId(programId))

})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TutorProgramPageBody))
